<template>
	<view class="posting_summary">
		<view class="time">
			<text class="day">{{ dateObj.day }}</text>
			<text class="other">{{ dateObj.other }}</text>
		</view>
		<view class="wrapper">
			<view class="content" @tap="navToPage">
				<text>{{ datas.body }}</text>
				<text class="ats" v-for="(item, index) in datas.ats" :key="index" @tap.stop="navToUser(item.id)">{{ ' @' + item.nickName }}</text>
				<view class="img-list">
					<view @tap.stop="showImage(0)">
						<image v-if="datas.mediaUrls !== null && datas.mediaUrls.length === 1" :src="datas.mediaUrls[0]" mode="aspectFill" class="img-single" />
					</view>
					<template v-if="datas.mediaUrls !== null && datas.mediaUrls.length > 1">
						<view class="item" v-for="(item, index) in datas.mediaUrls" :key="index"  @tap.stop="showImage(index)">
							<image :src="item" mode="aspectFill" />
						</view>			
					</template>
				</view>
				<view class="tag">
					<text v-for="(item, index) in datas.tags" :key="index">{{ '#' + item.name }}</text>
				</view>
			</view>
			<!-- 日期、 点赞 留言 收藏 投币功能 -->
			<view class="activeBottom">
				<view class="wrapper">
					<text :class="datas.liked ? 'inxupt inxupttubiao5 item' : 'inxupt inxupttubiao4 item'" @tap="praiseFn">
						<text class="activeNum">{{ this.translation(datas.likeNum) }}</text>
					</text>
					<text class="inxupt inxupttubiao6 item" @tap="navToPage">
						<text class="activeNum">{{ this.translation(datas.commentNum) }}</text>
					</text>
					<text :class="datas.favorited ? 'inxupt inxupttubiao8 item' : 'inxupt inxupttubiao7 item'" @tap="collectFn">
						<text class="activeNum">{{ this.translation(datas.favoriteNum) }}</text>
					</text>
					<text :class="datas.coined ? 'inxupt inxupttubiao10 item' : 'inxupt inxupttubiao9 item'" @tap="rewardFn">
						<text class="activeNum">{{ this.translation(datas.coinsNum) }}</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import ReportAndFollow from './../ReportAndFollow.vue';
import { _ajax } from '../../in-xupt-functions.js';

export default {
	data() {
		return {};
	},
	props: {
		datas: Object,
		isNav:Boolean
	},
	computed: {
		dateObj() {
			let date = this.datas.createTime
				.toString()
				.split(' ')[0]
				.toString()
				.split('-');
			let day = date[2];
			let other = '/' + date[1] + '月';
			if (new Date().getFullYear().toString() !== date[0]) {
				other += date[2] + '年';
			}
			return {
				day: day,
				other: other
			};
		}
	},
	methods: {
		praiseFn() {
			var adr = '/post/' + this.datas.postId + '/like';
			this.datas.liked = !this.datas.liked;
			if (this.datas.liked) {
				this.datas.likeNum++;
				// 点赞之后发送AJAX数字postId
				_ajax({
					url: adr,
					method: 'POST'
				}).then(res => {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '点赞成功'
					// });
					// this.datas.likeNum++;
				});
			} else {
				// 点赞取消之后发送AJAX数字postId
				this.datas.likeNum--;
				_ajax({
					url: adr,
					method: 'DELETE'
				}).then(res => {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '取消成功'
					// });
					// this.datas.likeNum--;
				});
			}
		},
		collectFn: function() {
			var adr = '/post/' + this.datas.postId + '/favorite';
			if (!this.datas.favorited) {
				this.datas.favoriteNum++;
				// 收藏之后发送AJAX数字postId
				_ajax({
					url: adr,
					method: 'POST'
				}).then(res => {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '收藏成功'
					// });
					// this.datas.favoriteNum++;
				});
			} else {
				// 取消收藏之后发送AJAX数字postId
				this.datas.favoriteNum--;
				_ajax({
					url: adr,
					method: 'DELETE'
				}).then(res => {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '取消成功'
					// });
					// this.datas.favoriteNum--;
				});
			}
			this.datas.favorited = !this.datas.favorited;
		},
		rewardFn: function() {
			var adr = '/post/' + this.datas.postId + '/coin';
			if (!this.datas.coined) {
				// this.datas.coinsNum++;
				// this.datas.coined = !this.datas.coined;
				_ajax({
					url: adr,
					method: 'POST'
				}).then(res => {
					if (res.data.status == 0) {
						this.datas.coinsNum++;
						this.datas.coined = !this.datas.coined;
						this.datas.coinsNum = this.solveNumber(this.datas.coinsNum);
						uni.showToast({
							icon: 'none',
							title: '感谢投币！(p≧w≦q)'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					}
				});
			}
		},
		showImage(index) {
			var imgList = this.datas.mediaUrls;
			uni.previewImage({
				urls: imgList,
				current: index,
				longPressActions: {
					itemList: ['保存到相册'],
					success: data => {
						uni.downloadFile({
							url: imgList[data.index],
							success: function(res) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: () => {
										uni.showToast({
											title: '保存成功',
											icon: 'none'
										});
									}
								});
							}
						});
					}
				}
			});
		},
		navToPage(){
			if(this.isNav){
				uni.navigateTo({
					url:"../Postings/Postings"+"?postId="+this.datas.postId,
					fail(res) {
						uni.showToast({
							title:"页面跳转失败",
							icon:"none"
						})
					}
				})
			}
		},
		navToUser(id){
			uni.navigateTo({
				url:"../OthersInformation/OthersInformation?userId="+id
			})
		},
		translation(e){
			if(e>9999){
				return (parseInt(e/1000)/10)+"W"
			}
			if(e>999){
				return (parseInt(e/100)/10)+"K"
			}
			return e
		}
	}
	// components: {
	// 	uniGrid,
	// 	uniGridItem
	// }
};
</script>

<style scoped lang="less">
.posting_summary {
	margin: 0 20rpx;
}
.wrapper {
	border-left: 1px solid #cfcfcf;
}
.activeBottom {
	height: 45rpx;
	font-size: 32rpx;
	width: 100%;
}
.activeBottom .wrapper {
	float: right;
	border: none;
}
.activeBottom .item {
	margin: 0 25rpx;
}
.activeBottom .item text {
	margin: 0 10rpx;
}
.content {
	margin: 0 40rpx;
}
.content .ats {
	color: @g-blue;
}
.content .tag {
	border-bottom: 1px solid #cfcfcf;
	padding: 10rpx 0;
}
.content .tag text {
	margin: 0 5rpx;
	color: @g-blue;
}
.img-single {
	width: 300rpx;
	border-radius: 5px;
}
.img-list {
	width: 630rpx;
	display: flex;
	flex-wrap: wrap;
}
.img-list .item {
	width: 200rpx;
	height: 200rpx;
	margin: 5rpx;
	overflow: hidden;
	border-radius: 5px;
}
.img-list image {
	width: 200rpx;
	height: 200rpx;
}
.time {
	color: @g-gray;
}
.time .day {
	font-size: 48rpx;
	font-weight: 400;
}
.activeNum {
	color: @g-gray;
}
</style>
